import React from "react";
import { Menu } from "antd";
import { _ROUTES_LIST } from "../../router/routes";
import { useLocation, useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
const Index: React.FC = () => {
  // 获取仓库数据
  const role = useSelector((state: any) => state.user.userInfo.role);

  const items = _ROUTES_LIST
    .filter((v) => {
      // 数据筛选

      // 是否隐藏
      if (v.meta.hidden) return false;
      // 是否需要权限
      if (!v.meta.roles) return true;
      // 需要权限 => 是否拥有权限
      else return v.meta.roles.includes(role);
    })
    .map((v) => {
      // 数据转化
      return {
        key: v.path,
        label: v.meta.title,
        icon: v.meta.icon,
      };
    });
  // 获取访问路径
  const location = useLocation();
  const pathname = location.pathname;
  // 获取跳转 hooks
  const navigate = useNavigate();
  return (
    <Menu
      items={items}
      theme="dark"
      selectedKeys={[pathname]}
      onClick={({ key }) => {
        navigate(key);
      }}
    ></Menu>
  );
};

export default Index;
